<!--  -->
<template>
  <div class="goods-detail">
    <!-- 头部 -->
    <van-nav-bar title="商品详情" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="content" v-if="Object.keys(detail).length">
      <!-- 轮播图 -->
      <div class="swiper-container">
        <van-swipe :autoplay="3000" ref="mySwiper">
          <van-swipe-item
            v-for="(item, index) in detail.pics"
            :key="item.pics_id"
            @click="clickPic(index)"
          >
            <img :src="item.pics_mid_url" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 价格 -->
      <div class="price">{{ detail.goods_price }}元</div>
      <!-- 商品名 -->
      <div class="name">{{ detail.goods_name }}</div>
      <!-- 图文详情 -->
      <div class="introduce">
        <div class="title">图文详情</div>
        <div class="introduce-content" v-html="detail.goods_introduce"></div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="tabbar">
      <div class="left-wrapper">
        <div class="left-item contact">
          <van-icon name="service" size="20" />
          <span>客服</span>
        </div>
        <div class="left-item share" @click="showSharePanel">
          <van-icon name="share" size="20" />
          <span>分享</span>
        </div>
        <div class="left-item shopcart" @click="toCart">
          <van-icon name="shopping-cart" size="20" />
          <span>购物车</span>
        </div>
      </div>
      <div class="right-wrapper">
        <div class="addToCart" @click="addToCart">加入购物车</div>
        <div class="buyAtOnce">立即购买</div>
      </div>
    </div>
    <!-- 图片预览组件 -->
    <van-image-preview
      :start-position="previewIndex"
      closeable
      v-model="showPreview"
      :images="images"
      @change="onChangeImage"
      @closed="onClosedImage"
    >
      <template v-slot:index
        >{{ previewIndex + 1 }} / {{ images.length }}</template
      >
    </van-image-preview>
    <!-- 分享面板组件 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="shareList"
    />
    <!--Popup弹出框 -->
    <van-popup
      v-model="popUpShow"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="detail-desc">
        <div class="header">
          <div class="avatar">
            <img
              src="http://image2.suning.cn/uimg/b2c/newcatentries/0070125000-000000000167731487_1_800x800.jpg"
              alt="商品封面图"
            />
          </div>
          <div class="desc">
            <div class="price">价格：<span>100</span>元</div>
            <div class="reset-count">库存：<span>100</span>件</div>
            <div>请选择产品属性</div>
          </div>
          <div class="close-icon">
            <van-icon name="close" color="#f00" size="20"></van-icon>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  NavBar,
  Icon,
  Swipe,
  SwipeItem,
  ImagePreview,
  ShareSheet,
  Popup,
} from "vant";
import { getGoodDetail } from "@/network/front/api";
export default {
  data() {
    return {
      detail: {},
      images: [],
      //是否显示图片预览组件
      showPreview: false,
      previewIndex: 0,
      //是否展示分享面板
      showShare: false,
      //分享方式列表
      shareList: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      //popUp弹出框是否显示
      popUpShow: true,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getGoodDetailData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },
    //获取商品详情数据
    async getGoodDetailData() {
      let res = await getGoodDetail({
        url: "/goods/detail",
        params: {
          goods_id: this.$route.params.id,
        },
      });
      if (res.message) {
        res.message.pics.forEach((item) => {
          this.images.push(item.pics_mid_url);
        });
        this.detail = res.message;
      }
    },
    //去购物车页面
    toCart() {
      this.$router.push({ name: "Cart" });
    },
    //点击图片（原来的）
    clickPic(index) {
      this.showPreview = true;
      this.previewIndex = index;
    },
    //切换图片（预览的）
    onChangeImage(index) {
      this.previewIndex = index;
      this.$refs.mySwiper.swipeTo(index);
    },
    //关闭图片预览功能
    onClosedImage() {
      setTimeout(() => {
        this.showPreview = false;
      }, 222);
    },
    //展示分享面板
    showSharePanel() {
      this.showShare = true;
    },
    //点击加入购物车按钮
    addToCart() {
      //先判断当前用户有没有登录，如果没有登录就直接跳到登录页面
      let userInfo = JSON.parse(localStorage.getItem("userInfo")) || {};
      if (!userInfo.token) {
        this.$router.push({ name: "Login" });
      } else {
        //才能执行下列操作
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [ImagePreview.Component.name]: ImagePreview.Component,
    [ShareSheet.name]: ShareSheet,
    [Popup.name]: Popup,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.goods-detail >>> .van-nav-bar__content {
  background-color: #ff734c;
}
.goods-detail >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  padding-top: 46px;
  padding-bottom: 50px;
}
.swiper-container img {
  width: 100vw;
}
.swiper-container >>> .van-swipe__indicator {
  width: 10px;
  height: 10px;
  background-color: #f00;
}
.content .price {
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #f00;
}
.content .name {
  padding: 10px;
  line-height: 1.5;
}
.content .introduce .title {
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
/* popUp弹出框 */
.goods-detail .detail-desc{
  padding: 20px;
}
.goods-detail .detail-desc .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.goods-detail .detail-desc .header .avatar img {
  width: 100px;
  height: 100px;
}
/* 底部选项卡 */
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 50px;
}
.tabbar > div {
  height: 100%;
}
.tabbar .left-wrapper {
  display: flex;
  background-color: #fff;
}
.tabbar .left-wrapper .left-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 100%;
}
.tabbar .left-wrapper .left-item span {
  font-size: 14px;
  margin-top: 2px;
}
.tabbar .right-wrapper {
  display: flex;
  flex: 1;
}
.tabbar .right-wrapper > div {
  width: 50%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.tabbar .right-wrapper .addToCart {
  background-color: #ffa500;
}
.tabbar .right-wrapper .buyAtOnce {
  background-color: #eb4450;
}
</style>